<script lang="ts">
	import Button from '@smui/button';
	import List, { Item, Separator, Text } from '@smui/list';
	import MenuSurface from '@smui/menu-surface';
	import { Icon } from '@smui/tab';
	import type { Style } from 'util';

	let surface: MenuSurface;
	let clicked = 'nothing yet';

	let className = '';
	export { className as class };
	export let style = '';
	export let text = 'menu button';
	export let color = '#e5e7eb';
	export let left_icon = '';
	export let right_icon = 'expand_more';
	export let variant: 'text' | 'raised' | 'unelevated' | 'outlined' = 'text';
	export let list: { label?: string; action?: () => void; icon?: string }[] = [];
</script>

<div style="min-width: 100px;">
	<Button
		class={className}
		on:click={() => surface.setOpen(true)}
		style={`color: ${color} !important; ${style}`}
		{variant}
	>
		{#if left_icon}
			<Icon class="material-icons">{left_icon}</Icon>
		{/if}
		<span class="mr-8px">{text}</span>
		{#if right_icon}
			<Icon class="material-icons" style="margin-right:0px;">{right_icon}</Icon>
		{/if}
	</Button>
	<MenuSurface bind:this={surface} anchorCorner="BOTTOM_LEFT">
		<List class="min-w-120px">
			{#each list as menuItem}
				<Item on:SMUI:action={menuItem.action}>
					{#if menuItem.icon}
						<div class="mr-10px min-h-16px line-height-16px">
							<Icon class="material-icons font-size-15px">{menuItem.icon}</Icon>
						</div>
					{/if}
					<Text>{menuItem.label}</Text>
				</Item>
			{/each}
		</List>
	</MenuSurface>
</div>
